<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 30px">
      <el-card style="width: 80%">
        <div style="margin-left: 20px">
          <div style="display: flex;align-items: center;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px">
            <div style="flex: 1">
              <div style="display: flex">
                <div style="font-size: 25px;font-weight: bold;">订单金额</div>
                <div style="margin-left: 10px;color: #409EFF;font-size: 24px;font-weight: bold">￥{{ price }}
                </div>
              </div>
            </div>
            <div style="flex: 1">
              <div style="margin-top: 20px;display: flex;align-items: center">
                <div style=";font-size: 20px;font-weight: bold">使用优惠券</div>
                <el-select v-model="coupon_id" placeholder="请选择" style="width: 300px;margin-left: 10px">
                  <el-option
                      style="margin-top: 10px;"
                      v-for="item in couponData"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div style="border-bottom: 1px solid #e5e5e5;padding-bottom: 10px;margin-top: 20px">
            <div style="font-size: 25px;font-weight: bold;">{{ PayData.hotel_name }}</div>
            <div style="display: flex;margin-top: 10px;width: 80%">
              <div style="flex: 1">房间数:{{ PayData.room_num }}</div>
              <div style="flex: 1">入住日期:{{ PayData.checkin_date }}</div>
              <div style="flex: 1">退房日期:{{ PayData.checkout_date }}</div>
              <div style="flex: 1">入住{{ PayData.stay_days }}晚</div>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;margin-top: 50px">
          <el-button type="warning" style="width: 100px;height: 50px;font-size: 20px"
                     @click="dialogPay = true">支付
          </el-button>
        </div>
      </el-card>
    </div>

    <el-dialog title="确认支付吗？" :visible.sync="dialogPay" width="30%">
      <div style="display: flex;justify-content: center">
        <el-form ref="formRef" label-width="80px" style="display: flex;justify-content: center">
          <div>
            <div style="text-align: center; margin-bottom: 20px">
              <div style="display: flex;align-items: center;justify-content: center">
                <div style="font-size: 20px;font-weight: bold;">订单金额：</div>
                <div style="color: #409EFF;font-size: 24px;font-weight: bold">￥{{ price }}</div>
              </div>
            </div>
            <div style="text-align: center; margin-bottom: 20px">
              <el-button type="primary" @click="PayC()">确认</el-button>
              <el-button @click="dialogPay = false">取 消</el-button>
            </div>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "offlinePayment",
  data() {
    return {
      dialogPay: false,
      pay_id: "",
      PayData: [],
      price: "",
      user: JSON.parse(localStorage.getItem('user')),
      point_amount: '0',
      Data: [],
      couponData: [],
      coupon_id: 0,
      pageNum: 1,
      pageSize: 9999,
      total: 0,
    }
  },
  watch: {
    coupon_id(value) {
      if (value) {
        const selectedCoupon = this.couponData.find(item => item.id === value);
        if (selectedCoupon) {
          this.price -= selectedCoupon.discount;
        }
      }
    }
  },
  methods: {
    load() {
      this.$request.post('/orders_list/', {
        "pay_id": this.pay_id
      }).then(res => {
        if (res.code === '200') {
          this.PayData = res.data
          this.price = this.PayData.price
          console.log("订单数据200", res.data)
          this.loadCoupon()
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadCoupon() {
      this.$request.post('/coupon_entity_list/', {
        "username": this.user.username,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
      }).then(res => {
        if (res.code === '200') {
          this.Data = res.data.coupon_list
          console.log("优惠券数据", res.data.coupon_list)
          if (Array.isArray(this.Data)) {
            this.couponData = this.Data.filter(row => row.status !== '已使用');
          }
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    PayC() {
      console.log("支付", this.pay_id)
      this.$request.post('/user_pay/', {
        "user_id": this.user.id,
        "pay_id": this.pay_id,
        "coupon_id": this.coupon_id
      }).then(res => {
        if (res.code === '200') {
          this.point_amount = this.PayData.price * 100;
          this.$message.success('支付成功')
          this.$request.post('/user_points_add/', {
            "pay_id": this.pay_id,
            "point_amount": this.point_amount,
          }).then(res => {
            if (res.code === '200') {
              this.$message.success('获得' + this.point_amount + '积分')
              //跳转到首页
              this.$router.push({
                path: '/userHome'
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log(res)
          this.$message.error(res.msg)
        }
      })
    },
  },
  created() {
    this.pay_id = this.$route.query.pay_id || ''
    this.load()
  }
}
</script>
<style scoped>

</style>
